<template>
    <div
        class="step-box"
        :style="{ height: height }">
        <van-steps
            height="80"
            direction="vertical"
            :active="0"
            active-color="#1890ff"
        >
            <van-step
                v-for="(child, index) in steps"
                :key="index">
                <div class="status-text">
                    {{ child.status
                    }}<span
                        class="time-text"
                        :style="{ float: 'right' }">{{
                            child.time
                        }}</span>
                </div>
                <p class="time-text">{{ child.desc }}</p>
                <template #inactive-icon>
                    <div class="inactive-circle" />
                </template>
                <template #active-icon>
                    <div class="active-double-circle">
                        <div class="state" />
                    </div>
                </template>
            </van-step>
        </van-steps>
    </div>
</template>
<script>
export default {
    props: {
        height: {
            type: String,
            default: '0'
        },
        steps: Array
    }
};
</script>
<style lang="scss" scoped>
.step-box {
    overflow: hidden;
    .status-text {
        opacity: 1;
        font-size: 17px;
        color: #000000;
    }
    .time-text {
        opacity: 1;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.4);
    }
    .active-double-circle {
        width: 22px;
        height: 22px;
        padding: 4px;
        box-sizing: border-box;
        background: rgba(24, 144, 255, 0.3);
        border-radius: 50%;
       .state {
            width: 14px;
            height: 14px;
            background: #1890ff;
            border-radius: 50%;
       }
    }
    .inactive-circle {
        width: 10px;
        height: 10px;
        background: #1890ff;
        border-radius: 50%;
    }
}
</style>
